<template>
  <g
    class="text"
    :transform="props.transform"
  >
    <g
      v-for="(v, i) in content"
      :key="'char-' + i"
      :transform="translate(i)"
    >
      <Char
        :char="v"
        :fill="props.fill"
      />
    </g>
  </g>
</template>

<script setup>
  import { computed } from "vue"
  import Char from './Char.vue'

  const props = defineProps({
    content: {
      type: String,
      default: ''
    },
    fill: {
      type: String,
      default: '#fff'
    },
    transform: {
      type: String,
      default: ''
    }
  })

  const content = computed(() => props.content === ' ' ? ' ' : props.content?.toLowerCase())
  const translate = (i) => `translate(${8 * i}, 0)`
</script>

<style lang="scss" scoped>

</style>